label([nglFormLabel]="label", [attr.for]="inputEl.id", [required]="required")
.slds-form-element__control
  .slds-combobox_container([class.slds-has-selection]="hasLookupSingleSelection")
    .slds-combobox.slds-dropdown-trigger.slds-dropdown-trigger_click([attr.aria-expanded]="open",
                                                                     aria-haspopup="listbox",
                                                                     role="combobox",
                                                                     [class.slds-is-open]="open",
                                                                     [attr.aria-owns]="uid")
      .slds-combobox__form-element.slds-input-has-icon(role="none",
                            cdkOverlayOrigin, #overlayOrigin="cdkOverlayOrigin",
                            [class.slds-input-has-icon_group-right]="loading",
                            [class.slds-input-has-icon_right]="!loading")
        ng-content(select="input")

        .slds-input__icon-group.slds-input__icon-group_right(*ngIf="loading; else iconRight")
          .slds-spinner.slds-spinner_brand.slds-spinner_x-small.slds-input__spinner(role="status")
            span.slds-assistive-text {{ loadingLabel }}
            .slds-spinner__dot-a
            .slds-spinner__dot-b

          ng-template([ngTemplateOutlet]="iconRight")

        //- Button
        ng-template(#iconRight)
          button.slds-button.slds-button_icon.slds-input__icon.slds-input__icon_right(*ngIf="hasLookupSingleSelection; else iconTpl",
                                                                                      type="button",
                                                                                      (click)="onClearSelection()",
                                                                                      [title]="removeSelectedLabel")
            svg.slds-button__icon(nglIconName="utility:close")
            span.slds-assistive-text {{ removeSelectedLabel }}

        ng-template(#iconTpl)
          span.slds-icon_container.slds-input__icon.slds-input__icon_right
            svg.slds-icon.slds-icon_x-small.slds-icon-text-default([nglIconName]="inputIconRight()")


ng-template(cdkConnectedOverlay,
            #cdkOverlay="cdkConnectedOverlay",
            [cdkConnectedOverlayPositions]="overlayPositions",
            [cdkConnectedOverlayOrigin]="overlayOrigin",
            [cdkConnectedOverlayMinWidth]="overlayWidth",
            [cdkConnectedOverlayOpen]="open",
            (nglOverlayScrolledOutsideView)="close()",
            (attach)="onAttach()",
            (detach)="onDetach()")
  //- (mousedown) handler will prevent input blur when clicking inside it
  .slds-dropdown.slds-dropdown_fluid(#dropdown, [attr.id]="uid", role="listbox", [ngClass]="dropdownClass()", (mousedown)="$event.preventDefault()")
    ul.slds-listbox.slds-listbox_vertical(role="presentation")
      li(*ngFor="let d of data; trackBy: trackByOption", nglComboboxOption,
          [value]="d.value",
          [label]="d.label",
          [disabled]="d.disabled",
          [selected]="isSelected(d.value)",
          (ariaActiveDescendant)="inputEl.setAriaActiveDescendant($event)",
          (selectedOption)="onOptionSelection($event)",
          (activeOption)="keyManager.setActiveItem($event)")

      //- Loading
      li.slds-listbox__item(*ngIf="loadingMore", role="presentation")
        .slds-align_absolute-center.slds-p-top_medium
          .slds-spinner.slds-spinner_x-small.slds-spinner_inline(role="status")
            .slds-assistive-text {{ loadingLabel }}
            .slds-spinner__dot-a
            .slds-spinner__dot-b

      //- No matches
      li.slds-listbox__item(*ngIf="hasNoMatches()", role="presentation", aria-live="polite")
        .slds-align_absolute-center
          span(role="status") {{ noOptionsFound }}
